<template>
    <div class="load-app">
        <img class="half_circle" src="/static/imgs/downapp/loadapp_halfcircle.png" alt="">
        <div class="box_one flex-center flex-col">
            <img class="load_logo" src="/static/imgs/downapp/loadapp_logo1.png" alt="">
            <img class="logo_word" src="/static/imgs/downapp/loadapp_logo.png" alt="">
            <img class="little_circle" src="/static/imgs/downapp/loadapp_circle.png" alt="">
            <div class="and-ios flex-center">
                <p class="flex-center" @click="gotoIos()"><img width="30px" src="/static/imgs/downapp/loadapp_ios.png" alt="">&nbsp;&nbsp;&nbsp;iPhone</p>
                <p class="flex-center" @click="gotoAnd()"><img width="30px" src="/static/imgs/downapp/loadapp_and.png" alt="">&nbsp;Android</p>
            </div>
        </div>
        <div class="red_box">
            <div class="flex-center flex-ctr-end">
                <div class="flex-tops">
                    <img class="img_quote" src="/static/imgs/downapp/loadapp_quote3.png" alt="">
                    <img class="word_neib" src="/static/imgs/downapp/loadapp_word2.png" alt="">
                </div>
                <img class="img_quote" src="/static/imgs/downapp/loadapp_quote4.png" alt="">
            </div>
            <p class="app_word">发现潮流球鞋穿搭/表达最真实的态度</p>
            <img class="load_img" src="/static/imgs/downapp/loadapp_neib.png" alt="">
        </div>
        <div class="box_three">
            <div class="flex-center flex-ctr-end">
                <div class="flex-tops">
                    <img class="img_quote" src="/static/imgs/downapp/loadapp_quote.png" alt="">
                    <img class="word_neib" src="/static/imgs/downapp/loadapp_word3.png" alt="">
                </div>
                <img class="img_quote" src="/static/imgs/downapp/loadapp_quote2.png" alt="">
            </div>
            <p class="app_word">汇聚全网限量球鞋发售信息/轻松原价入鞋</p>
            <img class="load_img_shadow" src="/static/imgs/downapp/loadapp_pic2.png" alt="">
        </div>
        <div class="red_box">
            <div class="flex-center flex-ctr-end">
                <div class="flex-tops">
                    <img class="img_quote" src="/static/imgs/downapp/loadapp_quote3.png" alt="">
                    <img class="word_neib" src="/static/imgs/downapp/loadapp_word4.png" alt="">
                </div>
                <img class="img_quote" src="/static/imgs/downapp/loadapp_quote4.png" alt="">
            </div>
            <p class="app_word">多重鉴别，确保正品/海量鞋款任你选购</p>
            <img class="load_img" src="/static/imgs/downapp/loadapp_shoes.png" alt="">
        </div>
        <div class="box_three">
            <div class="flex-center flex-ctr-end">
                <div class="flex-tops">
                    <img class="img_quote" src="/static/imgs/downapp/loadapp_quote.png" alt="">
                    <img class="word_neib" src="/static/imgs/downapp/loadapp_word.png" alt="">
                </div>
                <img class="img_quote" src="/static/imgs/downapp/loadapp_quote2.png" alt="">
            </div>
            <p class="app_word">潮牌定期品牌特卖/精选全球潮流品牌正品</p>
            <img class="load_img_shadow" src="/static/imgs/downapp/loadapp_pic1.png" alt="">
        </div>
        <div class="footer-box flex-center flex-col">
            <p class="business_name">上海砸立电子商务有限公司</p>
            <p>备案号：沪ICP备15055176号-1</p>
        </div>
    </div>
</template>
<script>
    export default {
    components: {},
    data() {
        return {};
    },
    methods: {
        gotoIos: function() {
        window.location.href = "https://itunes.apple.com/cn/app/id962223967?mt=8";
        },
        gotoAnd: function() {
        window.location.href = "https://files.eyee.com/app/update/eyee.apk";
        }
    }
    };
</script>
<style scoped>
    img{
        display: block;
    }
    .load-app{
        position: relative;
    }
    .half_circle{
        position: absolute;
        left: 0;top: 0;
        width: 21.6vw;
    }
    .box_one{
        position: relative;
        padding-top: 5.1vw;
    }
    .load_logo{
        width: 24vw;
        margin: 5.1vw 0 6.7vw;
    }
    .logo_word{
        width: 52.8vw;
    }
    .little_circle{
        position: absolute;
        width: 5.9vw;
        right: 13.3vw ;
        top: 54.7vw;
    }
    .and-ios >p{
        color:#fff;
        width: 32vw;
        height: 10.7vw;
        background-color: #FF4150;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        margin: 12.8vw 2vw 16vw;
    }
    .red_box{
        background-color: #FF4150;
        padding: 12vw 0 0;
    }
    .app_word{
        font-size: 12pt;
        font-weight: 600;
        color: #ffe3e3;
        line-height: 17px;
        margin-top: 10px;
        text-align: center;
    }
    .img_quote{
        width: 6.4vw;
    }
    .word_neib{
        width: 32.3vw;
        margin: 0 10px;
    }
    .load_img{
        width: 67.7vw;
        margin: 17.6vw auto 0;
    }
    .load_img_shadow{
        width: 51.7vw;
        margin: 14.9vw auto 0;
        box-shadow:0px 9px 68px #f9cacd;
    }
    .box_three{
        padding: 12vw 0 0;
        overflow: hidden;
    }
    .box_three .app_word{
        color:#FC868D; 
    }
    .footer-box{
        background-color: #FF4150;
        color:#fff;
        height: 63px;
        font-size: 11px;
        font-weight: 600;
    }
    .business_name{
        font-size: 14px;
        line-height: 20px;
    }
</style>
